<template>
	<view class="content">
		<shuffling :info="shufflingList"/>
		
		<view class="nav-list">
			<view class="nav-item" v-for="item in classifcationTypeList" :key="item.id">
				<image mode="widthFix" :src="item.cateImg"></image>
				<text>{{ item.cateName }}</text>
			</view>
		</view>
	
		<!-- 菜单栏 -->
		<!-- <view class="horizonal-tab">
			<scroll-view scroll-x="true" scroll-with-animation class="scroll-tab">
				<block v-for="(item,index) in tabBars" :key="index">
					<view class="scroll-tab-item" :class="{'active': tabIndex==index}" 
					@click="toggleTab(index)">
						{{item.name}}
						<view class="scroll-tab-line"></view>
					</view>
				</block>
			</scroll-view>
		</view> -->
		<view class="hot">
			<text>热门推荐</text>
		</view>
		
		<view class="goods-list">
			<view class="goods-list-item" v-for="item in products" :key="item.id" @click="handleJumpDetails(item.id)">
				<view style="flex-shrink: 0;">
					<view class="img">
						<image :src="item.headImg"></image>
					</view>
					<view class="title">
						{{ item.productName }}
					</view>
				</view>
				<view class="price">
					<text>¥{{ item.originalPrice }}</text>
					<text class="salePrice">¥{{ item.salePrice}}</text>
				</view>
				<view class="info">
					<view class="name">小洋洋</view>
					<view class="collection">收藏{{ item.stock }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive } from "vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
import { navConfigQueryAll, productQueryProductsByPage } from "@/api/index/index.js";
import { classificationQueryAll } from "@/api/classifcation/classifcation.js";
import shuffling from "../../components/shuffling.vue";


onShow(() => {
	handleGetShuffling();
	handleGetClassification();
	handleGetProducts();
});

const shufflingList = ref([]); // 轮播图数据
const handleGetShuffling = () => {
	navConfigQueryAll().then(res => {
		const { code, data } = res;
		if (code === 200) {
			shufflingList.value = data;
		}
	})
};

const classifcationTypeList = ref([]); // 分类列表
const handleGetClassification = () => { // 获取分类数据
	classificationQueryAll().then(res => {
		const { code, data } = res;
		if (code === 200) {
			classifcationTypeList.value = data;
		}
	})
}

const products = ref([]); // 商品数据
const handleGetProducts = () => { // 获取商品数据
	const params = {
		page: 1,
		size: 50,
		isHot: 1
	};
	productQueryProductsByPage(params).then(res => {
		const { code, data } = res;
		if (code === 200) {
			products.value = data.data;
		}
	})
}


const handleJumpDetails = (id) => { // 跳转商品详情
	uni.navigateTo({
		url: `../goodsDetails/goodsDetails?goodsId=${id}`
	})
}

const tabIndex = ref(0);
const tabBars = reactive([
	{
		name: '关注',
		id: 'guanzhu'
	},
	{
		name: '推荐',
		id: 'tuijian'
	},
	{
		name: '热点',
		id: 'redian'
	},
	{
		name: '体育',
		id: 'tiyu'
	},
	{
		name: '财经',
		id: 'caijing'
	},
	{
		name: '娱乐',
		id: 'yule'
	},
	{
		name: '体育',
		id: 'tiyu'
	},
	{
		name: '财经',
		id: 'caijing'
	},
	{
		name: '娱乐',
		id: 'yule'
	}
]);

const toggleTab = (index) => {
	tabIndex.value = index;
}
</script>

<style lang="scss" scoped>
@import '../../static/css/public.scss';

.content {
	.swiper-item {
		image {
			@include wh(100%, 100%);
		}
	}
	
	.goods-list {
		padding: 24rpx;
		background-color: #F5F5F5;
		display: flex;
		flex-wrap: wrap;
		
		.goods-list-item {
			width: 340rpx;
			height: 520rpx;
			background-color: #fff;
			border-radius: 16rpx;
			margin-bottom: 22rpx;
			display: flex;
			flex-direction: column;
			
			.img {
				height: 300rpx;
				
				image {
					@include wh(100%, 100%);
				}
			}
			
			.title {
				margin: 12rpx;
				@include sc(28rpx, #333);
				@include showEllipsis(2);
				line-height: 46rpx;
			}
			
			.price {
				padding-left: 20rpx;
				
				text {
					@include sc(30rpx, #FC4353);
				}
				
				.salePrice {
					text-decoration:line-through;
					@include sc(26rpx, #ccc);
					padding-left: 10rpx;
				}
			}
			
			.info {
				@include fja();
				padding: 0 15rpx;
				flex: auto;
				
				.name {
					@include sc(26rpx, #999);
				}
				
				.collection {
					@include sc(26rpx, #999);
				}
			}
			
			&:nth-child(odd) {
				margin-right: 22rpx;
			}
			
			&:nth-child(even) {
				
			}
		}
	}
	
	.hot {
		background-color: #fff;
		padding: 0rpx 34rpx 30rpx 34rpx;
		
		text {
			padding-bottom: 6rpx;
			@include sc(28rpx, #333);
			border-bottom: solid 6rpx #FC4353;
		}
	}
	
	.horizonal-tab .active{
		color: red;
	}
	
	.scroll-tab ::-webkit-scrollbar {
		display: none;
	}
	
	.scroll-tab{
		white-space: nowrap; /* 必要，导航栏才能横向*/
		border-bottom: 1rpx solid #eee;
		text-align: center;
		background-color: #fff;
		margin-top: 20rpx;
	}
	
	.scroll-tab-item{
		@include sc(30rpx, #666);
		display: inline-block; /* 必要，导航栏才能横向*/
		padding: 20rpx 20rpx;
	}
	
	.active .scroll-tab-line{
		border-bottom: 6rpx solid #FE5448;
		border-radius: 20rpx;
		width: 70rpx;
	}
	
	.nav-list {
		display: flex;
		padding: 30rpx 0;
		background-color: #fff;
		
		.nav-item {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			
			image {
				@include wh(92rpx, 92rpx);
			}
			
			text {
				padding-top: 18rpx;
				@include sc(28rpx, #666);
			}
		}
	}
}
</style>
